<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="pagerInfo.param.name"
        placeholder="角色名称"
        style="width: 200px; margin-right: 10px"
        class="filter-item"
      />
      <el-select
        v-if="isSystemAdmin"
        v-model="pagerInfo.param.roleTypesList"
        multiple
        filterable
        style="width: 200px; margin-right: 10px; margin-top: -10px"
        placeholder="角色类型"
      >
        <el-option
          v-for="(item, index) in roleTypesList"
          :key="index"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        @click="handleReset"
      >
        重置
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        @click="handleSearch({current: 1})"
      >
        查询
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        @click="handleAddVisible"
      >
        新增
      </el-button>
    </div>

    <el-table
      v-loading="pagerInfo.loading"
      :data="pagerInfo.result.records"
      border
      stripe
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="50"
      />

      <el-table-column label="角色名称" min-width="110px" align="center">
        <template slot-scope="{ row }">
          <span class="link-type">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色类型" align="center">
        <template slot-scope="{ row }">
          <span>{{ roleTypesMap.get(row.accessLevel).name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="来源" align="center">
        <template slot-scope="{ row }">
          <span>{{ roleUsagesMap.get(row.usages).name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色描述" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.descpt }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="150px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.lastUpdateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button v-if="canEdit(row)" type="primary" size="mini" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button
            v-if="canDelete(row)"
            size="mini"
            type="danger"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pagerInfo.result.total > 0"
      :total="pagerInfo.result.total"
      :page.sync="pagerInfo.param.current"
      :limit.sync="pagerInfo.param.size"
      @pagination="handleSearch"
    />

    <roleAdd v-if="addVisible" :visible="addVisible" :role-types-list="roleTypesList" @handleClose="handleAddVisible" @handleSuccess="handleSearch" />
    <roleEdit v-if="editVisible" :visible="editVisible" :row-data="rowData" :role-types-list="roleTypesList" @handleClose="handleEditVisible" @handleSuccess="handleSearch" />
  </div>
</template>
<script>
import roleAdd from './roleAdd'
import roleEdit from './roleEdit'
import { roleSearch, rolesDelete, roleDetails } from '@/api/iam/iamRole'
import { isSystemAdmin } from '@/utils/permission'
import * as R from 'ramda'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
export default {
  name: 'ComplexTable',
  directives: { waves },
  components: { Pagination, roleAdd, roleEdit },
  data() {
    const defPagerParam = {
      current: 1,
      size: 20,
      name: undefined,
      roleTypesList: []
    }
    const isSystemAdminConst = isSystemAdmin()
    /** role type**/
    const roleTypesList = [
      { id: 'SYSTEM_USER', name: '系统角色', canCreateFromHere: isSystemAdminConst },
      { id: 'TENANT_USER', name: '代理商(租户)角色', canCreateFromHere: false },
      { id: 'ORG_USER', name: '企业(组织)角色', canCreateFromHere: true },
      { id: 'INDIVIDUAL_USER', name: '个人角色', canCreateFromHere: false }
    ]
    const roleTypesMap = new Map()
    R.forEach(e => roleTypesMap.set(e.id, e), roleTypesList)
    /** role usage**/
    const roleUsagesList = [
      { id: 'SYSTEM', name: '系统内置' },
      { id: 'GENERAL', name: '通用' },
      { id: 'USER', name: '用户自定义' }
    ]
    const roleUsagesMap = new Map()
    R.forEach(e => roleUsagesMap.set(e.id, e), roleUsagesList)
    return {
      isSystemAdmin: isSystemAdminConst,
      defPagerParam: defPagerParam,
      pagerInfo: {
        loading: false,
        param: R.clone(defPagerParam),
        result: {
          total: 0
        }
      },
      rowData: {},
      addVisible: false,
      editVisible: false,
      roleTypesList: roleTypesList,
      roleTypesMap: roleTypesMap,
      roleUsagesMap: roleUsagesMap
    }
  },
  created() {
    this.handleSearch()
  },
  methods: {
    canDelete(row) {
      const isAdminAndNotSystemRole = this.isSystemAdmin && row.usages !== 'SYSTEM'
      const isOrgUserAndUserRole = !this.isSystemAdmin && row.usages === 'USER'
      return isAdminAndNotSystemRole || isOrgUserAndUserRole
    },
    canEdit(row) {
      return this.isSystemAdmin || row.usages === 'USER'
    },
    handleAddVisible() {
      this.addVisible = !this.addVisible
    },
    handleEditVisible() {
      this.editVisible = !this.editVisible
    },
    handleEdit(row) {
      this.rowData = row
      this.handleEditVisible()
    },
    // 处理删除选项
    handleDelete(row) {
      rolesDelete([row.id]).then(() => {
        this.$notify.success('删除成功')
        this.handleSearch()
      })
    },
    // 搜索
    handle() {
      this.pagerInfo.param.current = 1
      this.search()
    },
    // 重置
    handleReset() {
      this.pagerInfo.param = R.clone(this.defPagerParam)
    },
    handleSearch(param = {}) {
      this.pagerInfo.loading = true
      roleSearch(R.mergeLeft(param, this.pagerInfo.param)).then((response) => {
        this.pagerInfo.result = response
        this.pagerInfo.loading = false
      })
    }
  }
}
</script>
<style>
.filter-container{
  display: flex;
  justify-content: flex-end;
  align-items: center;

}
.align-items {
    margin-bottom: 0;
  }
</style>
